<template>
  <div class="badge-info-box">
    <el-popover
      ref="badge-pop-ref"
      placement="bottom"
      popper-class="badge-pop"
      width="300"
      :disabled="!badgeVal"
      trigger="click"
    >
      <el-tabs :value="activeCode">
        <template v-for="tab in tabList">
          <el-tab-pane :key="tab.code" :name="tab.code">
            <span slot="label">{{ tab.name }}({{ badgeVal }})</span>
            <div class="msg-box">
              <template v-for="item in tab.showList">
                <div :key="item.id" class="msg-item" @click="handleClick(item)">
                  <div class="msg-icon-box" :stye="item.iconStyle || {}">
                    <i :class="['msg-icon', item.icon]" />
                  </div>
                  <div class="msg-content">
                    <div class="msg">
                      {{ `你有${item.num}条${item.name}信息待处理` }}
                    </div>
                    <div class="date">{{ item.date }}</div>
                  </div>
                </div>
              </template>
            </div>
          </el-tab-pane>
        </template>
      </el-tabs>

      <el-badge
        slot="reference"
        :hidden="!badgeVal"
        :max="99"
        :value="badgeVal"
      >
        <i class="el-icon-bell" />
      </el-badge>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'BadgeInfo',
  data() {
    return {
      badgeVal: 0,
      activeCode: 'tz',
      tabList: [
        {
          name: '通知',
          code: 'tz',
          msgConfig: {
            1: {
              name: '故障报修',
              num: '',
              icon: 'menu-icon-fault',
              routerName: 'FaultReport',
              date: ''
            },
            2: {
              name: '政策动态',
              num: '',
              icon: 'menu-icon-policy',
              routerName: 'NewsFlashManage',
              date: ''
            }
          },
          showList: []
        }
      ]
    }
  },
  created() {
    // this.getData();
  },
  methods: {
    handleClick(item) {
      const { routerName } = item || {}
      if (routerName) {
        this.$router.push({
          name: routerName
          // params
        })
      }
      this.$refs['badge-pop-ref'].doClose()
    },
    async getData() {
      try {
        const res = await this.$api.noticeList()
        console.log(res)
        if (Number(res.code) === 1000 && res.data) {
          this.badgeVal = res.data.reduce((pre, cur) => {
            return pre + Number(cur.num)
          }, 0)
          this.tabList.forEach((ele) => {
            if (ele.code === 'tz') {
              const showList =
                res.data.map((e) => {
                  const obj = ele.msgConfig[e.module] || {}
                  return {
                    ...(obj || {}),
                    date: this.$formatDate(new Date()),
                    num: e.num
                  }
                }) || []

              this.$set(ele, 'showList', showList)
            }
          })
        }
      } catch (error) {
        //
      }
    }
  }
}
</script>

<style lang="scss">
.badge-pop {
  padding: 0;
  .el-tabs__item {
    font-size: 16px;
  }
  .msg-box {
    .msg-item {
      display: flex;
      padding: 10px 20px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
      .msg-icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #60b2fc;
        color: #fff;
        font-size: 14px;
        .msg-icon {
          width: 16px;
          height: 16px;
          display: inline-block;
          background-size: 100%;
        }
      }
      .msg-content {
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        .msg {
          font-size: 16px;
        }
        .date {
          font-size: 14px;
        }
      }
      &:first-child {
        padding-top: 0;
      }
      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.badge-info-box {
  display: inline-block;
  padding: 0 20px;
  cursor: pointer;
  .el-badge {
    line-height: 1;
  }
}
</style>
